/*
 * @Author: wuqiang
 * @Date: 2023-11-17 00:28:11
 * @LastEditors: wuqiang
 * @LastEditTime: 2023-11-17 16:04:31
 */
import React from 'react'
import {
  choosy_banner,
  choosy_btn_renew,
  choosy_btn_service,
  choosy_icon_more,
  choosy_img1,
  choosy_img2,
  choosy_img3,
  choosy_img4,
  choosy_img5
} from '@/utils/loadImages'
import './index.scss'

const list = [
  {
    img: choosy_img1,
    title: '惠军家庭医疗保险服务卡2023版',
    subTitle: ['家庭必备', '医保补充'],
    content:
      '首保放宽至70岁   重疾免赔额降为0元新增重大疾病给付金  专属医疗服务120万一针癌细胞清零特药增至两种',
    price: '97元/年起'
  },
  {
    img: choosy_img2,
    title: '惠军家庭医疗保险服务卡2022版',
    subTitle: [],
    content:
      '医疗服务升级  百万特药保障',
    price: '181元起'
  },
  {
    img: choosy_img3,
    title: '惠军家庭医疗保险服务卡',
    subTitle: ['家庭必备', '医保补充'],
    content:
      '600万保障  不限疾病种类  百分百报销',
    price: '125元/年起'
  },
  {
    img: choosy_img4,
    title: '臻爱守候无忧防癌保障',
    subTitle: ['31-80周岁', '0免赔额'],
    content:
      '亚健康和高血压人群可办理',
    price: '255元/年起'
  },
  {
    img: choosy_img5,
    title: '惠军家庭综合保险给付卡2022版',
    subTitle: ['28天-70周岁', '一次性赔付'],
    content:
      '七大保障一卡集合',
    price: '83元/年起'
  }
]

export default function choosy() {
  return (
    <div className="choosy-page">
      <img src={choosy_banner} className="choosy_banner" alt="" />
      <div className="choosy_btns">
        <img src={choosy_btn_renew} alt="" />
        <img src={choosy_btn_service} alt="" />
      </div>
      <div className="choosy_content">
        <h2 className="choosy_title">惠军家庭专属保障</h2>
        {list.map((item, index) => {
          return (
            <div className="choosy_card" key={index}>
          <div className="choosy_card_content">
            <div className="choosy_card_left">
              <img src={item.img} alt="" />
            </div>
            <div className="choosy_card_right">
              <h2 className="choosy_card_right_header">
                <span className="choosy_card_right_title">{item.title}</span>
                <img src={choosy_icon_more} className="choosy_icon_more" alt="" />
              </h2>
              <h5 className="choosy_card_right_subTitle">
                {item.subTitle?.map((s, idx) => {
                  return <span key={idx}>{s}</span>
                })}
              </h5>
            </div>
          </div>
          <div className="choosy_card_footer">
            <div className="choosy_card_footer_left">
              {item.content}
            </div>
            <div className="choosy_card_footer_right">{item.price}</div>
          </div>
        </div>
          )
        })}
      </div>
      <footer className="choosy_footer">
        央企保障 踏实放心
        <br />
        专属客服热线：400-068-8181
      </footer>
    </div>
  )
}
